<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/product.css" />
    <link rel="stylesheet" href="./icon/iconfont.css" />
  </head>
  <body>
    <div class="wrap">
      <header>
        <div class="logo">
          <a href="./index.html">
            <img
            src="https://www.lorealparis.com.cn/-/media/project/loreal/brand-sites/oap/shared/baseline/navigationext/loreal-paris-black-logo.svg
            alt="" />
          </a>
        </div>
        <ul class="nav">
          <li>
            <a href="">护肤</a>
            <div class="menu">
              <div class="mbox">
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
              </div>
              <div class="allmenu">
                <p>
                  <a href="./skincare.html"><span>护肤</span>所有护肤</a>
                </p>
              </div>
            </div>
          </li>
          <li>
            <a href="">彩妆</a>
            <div class="menu">
              <div class="mbox">
                <ul>
                  <li><p>脸部产品</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
                <ul>
                  <li><p>唇部产品</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
                <ul>
                  <li><p>眼部产品</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
              </div>
              <div class="allmenu">
                <p>
                  <a href="./makeup.html"><span>彩妆</span>点击查看详情</a>
                </p>
              </div>
            </div>
          </li>
          <li>
            <a href="">护发</a>
            <div class="menu">
              <div class="mbox">
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
                <ul>
                  <li><p>按产品系列</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
                <ul>
                  <li><p>按步骤</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
              </div>
              <div class="allmenu">
                <p>
                  <a href="./wshampoo.html"><span>护发</span>所有产品</a>
                </p>
              </div>
            </div>
          </li>
          <li>
            <a href="">染发</a>
            <div class="menu">
              <div class="mbox">
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
                <ul>
                  <li><p>按潮流发色分类</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
              </div>
              <div class="allmenu">
                <p>
                  <a href="./tint.html"><span>在线试色</span>所有护发</a>
                </p>
              </div>
            </div>
          </li>
          <li>
            <a href="">男士护发</a>
            <div class="menu">
              <div class="mbox">
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
              </div>
              <div class="allmenu">
                <p>
                  <a href="./mhair.html"><span>男士护发</span>所有产品</a>
                </p>
              </div>
            </div>
          </li>
          <li>
            <a href="">男士造型</a>
            <div class="menu">
              <div class="mbox">
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
              </div>
              <div class="allmenu">
                <p>
                  <a href="./profiling.html"><span>男士造型</span>所有产品</a>
                </p>
              </div>
            </div>
          </li>
          <li>
            <a href="">男士护肤</a>
            <div class="menu">
              <div class="mbox">
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
              </div>
              <div class="allmenu">
                <p>
                  <a href="./product.html"><span>护发</span>所有护发</a>
                </p>
              </div>
            </div>
          </li>
          <li>
            <a href="">男士彩妆</a>
            <div class="menu">
              <div class="mbox">
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
                <ul>
                  <li><p>按功效需求</p></li>
                  <li><a href="">柔软修护</a></li>
                  <li><a href="">蓬松补水</a></li>
                  <li><a href="">防脱强韧</a></li>
                  <li><a href="">精油</a></li>
                  <li><a href="">其他</a></li>
                </ul>
              </div>
              <div class="allmenu">
                <p>
                  <a href=""><span>护发</span>所有护发</a>
                </p>
              </div>
            </div>
          </li>
          <li><a href="">BEAUTY MAGAZINE</a></li>
        </ul>
        <div class="serch">
          <button><i class="iconfont">&#xe600;</i></button>
          <form action="">
            <input type="text" placeholder="请输入你想寻找的内容" />
            <i class="iconfont" id="close">&#xe659;</i>
            <i class="iconfont" id="serchipt">&#xe600;</i>
          </form>
        </div>
      </header>
      <main>
        <div class="introduction">
          <div class="photo">
            <div class="picture"></div>
            <div class="picture"></div>
          </div>
          <div class="content">
            <div class="head">
              <ol>
                <li>
                  <a href="">Home</a>
                </li>
                <li>
                  <a href="">护肤</a>
                </li>
                <li>
                  <a href="">女士护肤</a>
                </li>
                <li>
                  <a href="">复颜玻尿酸水光充盈导入系列</a>
                </li>
                <li>复颜玻尿酸水光充盈导入系列</li>
              </ol>
              <p><a href=""> 复颜玻尿酸水光充盈导入系列</a></p>
              <h1>水光充盈导入安瓶鲜注精华面膜</h1>
              <h2>“一夜回春”干皮救星欧莱雅安瓶面膜，15分钟SPA唤醒水光肌</h2>
              <div class="btn">
                <button class="num">33G*5片</button>
                <button class="buy">Buy now</button>
              </div>
            </div>
            <ul class="classification">
              <li>
                <h1>产品详情</h1>
                <p>
                  欧莱雅第一款安瓶鲜注面膜，创新液膜分区，高纯度玻尿酸如安瓶般鲜活保存，融合间释放于强大吸收力的海藻精华膜布。肌肤持久补水，更加膨润柔滑。
                </p>
              </li>
              <li>
                <h1>成分及功效</h1>
                <p>
                  蕴含高纯度玻尿酸，鲜活保存，水润啫喱质地，深透肌底，持久保湿，为肌肤注入膨润，感受细纹淡化。液膜分区，搭配亲肤膜布，强大吸收力，可承载于自身重量20倍的精华液。膜布含海藻精华，柔肤舒适，高度贴合肌肤。
                </p>
              </li>
              <li>
                <h1>如何使用</h1>
                <p>
                  一折：将内袋沿背面虚线折叠两次；
                  二按：按压精华液部分使其注入膜布；
                  三捏：充分揉捏使精华液被膜布均匀吸收；
                  四敷：取出面膜，轻敷于面部，15分钟后取下，轻柔按摩促进成分吸收
                </p>
              </li>
            </ul>
            <div class="btns">
              <button class="first">面膜</button>
              <button class="second">对抗衰老</button>
            </div>
          </div>
        </div>
      </main>
      <footer>
        <div class="footer-content">
          <div class="content">
            <div class="row">
              <p>More to Explore</p>
              <ul>
                <li><a href="./about.html">关于我们</a></li>
                <li><a href="">查看所有内容</a></li>
              </ul>
            </div>
            <div class="row website">
              <p>Social</p>
              <ul>
                <li>
                  <i class="iconfont">&#xe601;</i
                  ><a href="">巴黎欧莱雅官方微博</a>
                </li>
                <li>
                  <i class="iconfont">&#xe601;</i
                  ><a href="">欧莱雅美发官方微博</a>
                </li>
                <li>
                  <i class="iconfont">&#xe601;</i
                  ><a href="">巴黎欧莱雅男士官方微博</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="remind">
            <p>
              国家药监局提示您：请正确认识化妆品功效，化妆品不能代替药品，不能治疗皮肤病等疾病
            </p>
          </div>
        </div>
        <div class="policy">
          <img
            src="https://ccx-work-1317399396.cos.ap-guangzhou.myqcloud.com/footer_map.png"
            alt=""
          />
          <ul class="ordinance">
            <li><a href="">Cookies政策</a></li>
            <li><a href="">隐私政策</a></li>
            <li><a href="">使用条款</a></li>
            <li>@ 2022 L'Oréal Paris</li>
          </ul>
        </div>
        <div class="call">
          <p>
            欧莱雅客户关怀中心：400-821-5098 会员积分兑礼服务热线：400-821-5098
            欧莱雅中国有限公司地址：上海市静安区南京西路1601号
          </p>
        </div>
        <div class="bottom">
          <div class="bottom-content">
            <span>沪公网安备 31010602001554号</span>
            <span>中国工商 沪ICP备08100043号-32</span>
          </div>
        </div>
      </footer>
    </div>
    <script src="./js/axios.js"></script>
    <script type="module" src="./js/product.js"></script>
  </body>
</html>
